<template>
	<div>
		<Modal v-model="modal1" :mask-closable="false" :class-name="wTheme" :width="width" @on-cancel="cancel">
			<p slot="header" class="modal-header">
				<Icon type="information-circled"></Icon>
				<span>{{title}}</span>
			</p>
			<div class="modal-body">
				<slot></slot>
			</div>
			<div slot="footer" class="modal-bottom">
				<Button type="primary" v-if="!hideFooter && whetherShowOk" @click="ok">{{okText}}</Button>
				<Button v-if="!hideFooter && whetherShowCancel" @click="cancel">{{cancelText}}</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import $ from 'jquery';
	import m from 'malihu-custom-scrollbar-plugin';
	import mw from 'jquery-mousewheel';
	import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css';
	export default {
		props: {
			value: {
				required: true,
				default: null
			},
			okText: {
				type: String,
				default: '确认'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			title: {
				type: String
			},
			width: {
				type: Number
			},
			//是否展示ok按钮
			whetherShowOk: {
				type: Boolean,
				default: true
			},
			//是否展示cancel按钮
			whetherShowCancel: {
				type: Boolean,
				default: true
			},
			/**
			 * 是否隐藏底部
			 */
			hideFooter: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				modal1: false,
				modalId: ''
			}
		},
		watch: {
			value(val) {
				this.modal1 = val;
				if(val) {
					//显示的时候才触发
					this.modalId =  'ws-modal-' + Date.parse(new Date());
					this.init();
				}
			},
			modal1(val) {
				this.$emit('input', val);
			}
		},
		computed: {
			/**
			 * 系统皮肤
			 * @return {[type]} [description]
			 */
			wTheme() {
				return 'ws-modal ' + this.modalId;
			}
		},
		mounted() {
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			// if(getCurrentLanguage=='en'){
			// 	this.okText='confirm';
			// 	this.cancelText='cancel';
			// }
		},
		methods: {
			//初始化
			init() {
				var obj = this;
				this.$nextTick(function() {
					this.bindScroll();
					$(window).resize(function() {
						obj.bindScroll();
					});
				});
			},
			bindScroll() {
				let pModalId = '.' + this.modalId;
				let windowHeight = $(window).height();
				let modalHeight1 = $(pModalId + ' .ivu-modal-body .modal-body').height();
				let modalHeight2 = $(pModalId + ' .ivu-modal-body').height();
//				console.log(pModalId + '-----' +modalHeight1 + '---' + modalHeight2);
				let realHeight = modalHeight1 + 100 + 50.71 + 55.8 + 55.98;
				if(realHeight > windowHeight) {
					let r1Height = realHeight - 100;
					let top = 0;
					if(r1Height > windowHeight) {
						//需要出现滚动条
						let r2Height = windowHeight - 50.71 - 55.8 - 33;
						$(pModalId + ' .ivu-modal .ivu-modal-content .ivu-modal-body').height(r2Height);
						$(pModalId + ' .ivu-modal .ivu-modal-content .ivu-modal-body').mCustomScrollbar({
							theme: "minimal-dark",
							scrollInertia: 500
						});
					} else {
						top = (windowHeight - r1Height) / 2;
					}
					$(pModalId + ' .ivu-modal').css('top', top + 'px');
				} else {
				}
			},
			//确认按钮触发
			ok() {				
				this.$emit('on-ok');
			},
			//取消按钮触发(包含关闭图标)
			cancel() {
				this.$emit('on-cancel');
			}
		}
	}
</script>

<style>
	.ws-modal .ivu-modal {}
	
	.ws-modal .ivu-modal .ivu-modal-content {
		border-radius: 0 !important;
	}
	/**
	 * 关闭
	 */
	
	.wsplus-theme-light .ivu-modal .ivu-modal-content .ivu-modal-close .ivu-icon {
		color: #FFFFFF;
	}
	
	.wsplus-theme-dark .ivu-modal .ivu-modal-content .ivu-modal-close .ivu-icon {}
	/**
	 * 顶部
	 */
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-header {}
	
	.wsplus-theme-light .ivu-modal .ivu-modal-content .ivu-modal-header {
		background-color: #1e88e5 !important;
		/*#2d8cf0;*/
	}
	
	.wsplus-theme-dark .ivu-modal .ivu-modal-content .ivu-modal-header {
		background-color: #f3f3f3;
	}
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-header .modal-header {
		text-align: center;
	}
	
	.wsplus-theme-light .ivu-modal .ivu-modal-content .ivu-modal-header .modal-header {
		color: #FFFFFF;
	}
	
	.wsplus-theme-dark .ivu-modal .ivu-modal-content .ivu-modal-header .modal-header {}
	/**
	 * 内容体
	 */
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-body {
		/*height: 364px;*/
	}
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-body .modal-body {}
	/**
	 * 底部
	 */
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-footer {}
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-footer .modal-bottom {
		text-align: center;
	}
	
	.ws-modal .ivu-modal .ivu-modal-content .ivu-modal-footer .modal-bottom .ivu-btn {
		padding-left: 25px;
		padding-right: 25px;
	}
</style>